<script setup>
import { ref, watch } from "vue";
import { onLoad, onPageScroll, onPullDownRefresh, onReachBottom } from "@dcloudio/uni-app";
import { useInfiniteScroll } from "@/composables/useInfiniteScroll";
import { getRecommendParList, getRecommendMonthParList, getMemberVerifyLawyer } from "@/api/lawyer";

const getList = (params) => {
  if(tabsTypeActiveIdx.value == 0) {
    return getRecommendParList(params);
  } else if(tabsTypeActiveIdx.value == 1) {
    return getRecommendMonthParList(params);
  } else if(tabsTypeActiveIdx.value == 2) {
    return getMemberVerifyLawyer(params);
  }
}

const { items: list, isLoading, hasMore, error, resetAndLoad, loadMore } = useInfiniteScroll(getList);

const tabsType = [
  { key: '1', label: '年度推荐'},
  { key: '2', label: '奖项申报'},
  { key: '3', label: '个人申报'},
];
const tabsTypeActiveIdx = ref(0);
watch(tabsTypeActiveIdx, (newIdx) => {
  queryParams.value.status = '';
  // 切换tabsType时重新加载数据
  resetAndLoad(queryParams.value);
}, { deep: true });

const tabs = [
  { key: '', label: '全部'},
  { key: '0', label: '待审核'},
  { key: '2', label: '被拒绝'},
  { key: '1', label: '已通过'},
];
/** 查询参数  */
const queryParams = ref({
  status: '',
});

watch(queryParams, (newQueryParams) => {
  console.log("Query Params changed:", newQueryParams);
  resetAndLoad(newQueryParams);
}, { deep: true });

// 页面加载
onLoad(() => {
  resetAndLoad(queryParams.value);
});

// 监听用户下拉动作
onPullDownRefresh(() => {
  resetAndLoad(queryParams.value).finally(() => {
    // 停止当前页面下拉刷新
    uni.stopPullDownRefresh();
  });
});

// 页面滚动到底部的事件
onReachBottom(() => loadMore());

// 吸顶变色
const isScrolled = ref(false);
onPageScroll((e)=>{
  isScrolled.value = e.scrollTop > 0;
});
</script>

<template>
<view class="relative overflow-hidden">
  <page-navbar title="我的推荐" :isScrolled="isScrolled"></page-navbar>

  <view class="mt-5 overflow-x-auto scrollbar-hide">
    <view class="w-fit flex gap-5 px-4">
      <view
        class="rounded-full py-2 box-border break-keep relative before:(content-[''] w-1/2 h-1 rounded-full bg-#1373FF absolute left-1/2 -translate-x-1/2 bottom-0)"
        :class="[tabsTypeActiveIdx == index ? 'text-#1373FF font-bold before:block' : 'text-#666666 before:hidden']"
        v-for="(item, index) in tabsType" :key="index"
        @click="tabsTypeActiveIdx = index"
      >
        {{ item.label }}
      </view>
    </view>
  </view>

  <view class="my-1 overflow-x-auto scrollbar-hide">
    <view class="w-fit flex gap-2 p-4">
      <view
        class="rounded-full px-3 py-1 box-border break-keep text-sm"
        :class="[queryParams.status == item.key ? 'text-white font-500 bg-gradient-to-r from-#5199F9 to-#0164E6' : 'text-black/80 bg-white border-(~ solid black/8)']"
        v-for="(item, index) in tabs"
        :key="index"
        @click="queryParams.status = item.key"
      >
        {{ item.label }}
      </view>
    </view>
  </view>

  

  <page-list :list="list" :hasMore="false" :isLoading="isLoading" :loadMore="loadMore">
    <view
      class="relative mx-4 mb-3 p-3 rounded-lg border-(~ solid black/8) bg-white"
      v-for="item in list" :key="item.id"
    >
      <image v-if="item.status == 0" class="w-14 h-9 absolute -top-1 -right-0.5 z-1" src="https://static.minglvtang.com/images/icons/state_warn.png" mode="widthFix" />
      <image v-if="item.status == 1" class="w-14 h-9 absolute -top-1 -right-0.5 z-1" src="https://static.minglvtang.com/images/icons/state_pass.png" mode="widthFix" />
      <image v-if="item.status == 2" class="w-14 h-9 absolute -top-1 -right-0.5 z-1" src="https://static.minglvtang.com/images/icons/state_error.png" mode="widthFix" />
      <view class="text-(lg #333333)">{{item.recommendLawyerName || item.lawyerFullname}}</view>
      <view class="text-sm flex mt-3">
        <view class="text-#999999">所在律所：</view>
        <view class="text-#333333">{{item.recommendLawyerCompany || item.lawfirmName}}</view>
      </view>
      <view class="text-sm flex mt-2">
        <view class="text-#999999">推荐日期：</view>
        <view class="text-#333333">{{item.createTime}}</view>
      </view>
    </view>
  </page-list>
</view>  
</template>
